<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lcy">
    <script src="../jquery-3.1.1.js"></script>
    <title></title>
    <style>
        ul,li,h2{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        main{
            width: 330px;
            height: 400px;
            margin: 30px auto;
            border: 1px solid #ccc;
            text-align: center;
        }
        h2{
            width: 100%;
            height: 35px;
            line-height: 35px;
            font-size: 16px;
            margin-top: 4px;
            border-bottom: 2px solid black;
            text-align: center; 
        }
        ul{
            width: 284px;
            height: 358px;
            overflow: hidden;
            padding: 0 24px;
        }
        ul li{
            float: left;
            margin: 10px 10px 0 10px;
            position: relative;
            width: 122px;
            height: 77px;
        }
        li img{
            position: absolute;
            width: 120px;
            height: 75px;
            border: 1px solid #ccc;
            left: 0;
            top: 0;
            z-index: 20;
        }
        li span{
            background-color: sandybrown;
            position: absolute;
            top: 38px;
            left: 0;
            width: 120px;
            height: 0;
            border: 1px solid #ccc;
            color: white;
            z-index: 10;
            text-align: center;
            line-height: 75px;
            font-size: 14px;
            display: none;
        }
    </style>
</head>
<body>
    <main>
        <h2>热门品牌推荐</h2>
        <ul>
            <li><img src="../images/11.jpg" alt=""><span>肌龄</span></li>
            <li><img src="../images/22.jpg" alt=""><span>肌龄</span></li>
            <li><img src="../images/33.jpg" alt=""><span>肌龄</span></li>
            <li><img src="../images/44.jpg" alt=""><span>肌龄</span></li>
            <li><img src="../images/55.jpg" alt=""><span>肌龄</span></li>
            <li><img src="../images/66.jpg" alt=""><span>肌龄</span></li>
            <li><img src="../images/77.jpg" alt=""><span>肌龄</span></li>
            <li><img src="../images/88.jpg" alt=""><span>肌龄</span></li>
            <div style="clear: both"></div>
        </ul>
    </main>
</body>
</html>
<script>
    $('li').hover(function(){
        $(this).find('img').hide();
        $(this).find('img').css({zIndex:10});
        $(this).find('img').stop().animate({
            top:37,
            height:0,
        },200)
        $(this).find('span').show();
        $(this).find('span').stop().animate({
            top:0,
            height:77,
        },200)
    },function(){
        $(this).find('img').show();
        $(this).find('img').css({zIndex:20});
        $(this).find('img').stop().animate({
            top:0,
            height:74,
        },200)
        $(this).find('span').hide();
        $(this).find('span').stop().animate({
            top:37,
            height:0,
        },200)
    })
</script>